<template>
  <div>
    <el-dialog title="消息记录" :visible.sync="dialogVisible" width="30%" class="dialog" v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" :before-close="handleClose" :close-on-click-modal="false" center>
      <div class="messageList">
        <div v-for="(item, index) in list" :key="index">
          <div :class="item.sender_type == 'patient' ? 'patient' : 'doctor'">
            <span>{{ item.sender_name }}({{
                item.sender_type == "patient" ? "患者" : "医生"
              }})</span>
            <span class="ml10">{{ item.time }}</span>
          </div>
          <div class="content">
            <div v-if="item.type === 'txt'">{{ item.content }}</div>
            <tablePrImg v-else-if="item.type === 'img'" :imgSrc="item.content" :prImgList="[item.content]" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="this.params.page=='1'" @click="getData('pre')">上一页</el-button>
        <el-button type="primary" :disabled="this.params.page==this.last_page" @click="getData('next')">下一页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  ApimessageRecord,
} from "@a/index";
export default {
  components: {},
  props: {},
  data() {
    return {
      last_page: '',
      dialogVisible: false,
      list: [],
      firstid: "",
      lastid: "",
      id: "",
      loading: false,
      params: {
        page: 1,
        size: 10
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    show(id) {
      this.id = id;
      this.getData();
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.id = "";
      this.firstid = "";
      this.lastid = "";
      this.list = [];
      this.params = {
        page: 1,
        size: 10
      }
    },
    getData(type) {
      this.loading = true;
      /*    const param = {
           size: 10,
           order_id: type == "pre" ? this.firstid : this.lastid,
           page_type: type,
         }; */
      if (type == 'next') {
        this.params.page++
      }
      else if (type == 'pre') {
        this.params.page--
      }
      ApimessageRecord({ ...this.params, order_id: this.id })
        .then((res) => {
          if (Array.isArray(res.data) && res.data.length > 0) {
            /*   this.firstid = res.data[0].id;
              this.lastid = res.data[res.data.length - 1].id; */
            this.list = res.data;
            this.last_page = res.page.last_page
          }
          /*   else {
             this.$message({
               message: "暂无更多消息",
               type: "warning",
             });
           } */
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
  max-height: 90%;
  overflow: auto;
}

.content {
  padding: 10px;
  line-height: 1.5rem;
}

.doctor {
  color: #0000ff;
}
.patient {
  color: #159879;
}
.messageList {
  width: 100%;
  height: 400px;
  overflow: auto;
}
</style>
